<template>

  <v-app id="app">
    
    <!--登录与注册-->
    <Launchdialog></Launchdialog>
    <Registdialog></Registdialog>
    <!---->

    <!----顶栏与侧边栏---->
    <Topbar></Topbar>
    <!--设置-->
    <Settings></Settings>
    <!--浮动按钮-->
    <v-content app class="ma-0">
      <v-fab-transition>
        <v-btn
          class="mb-5 mr-5"
          v-show="gotop"
          color="primary"
          fab
          dark
          fixed
          bottom
          right
          @click="toTop"
        >
          <v-icon>mdi-arrow-up</v-icon>
          
        </v-btn>
      
      </v-fab-transition>
      <!---主页---->
      
        <transition :name="transitionanimation">
          <router-view class=""></router-view>
        </transition>
        <v-footer style="postition:absolute;bottom:0;" class="py-4" dark height="auto">
          <v-container mx-auto>
            <v-layout wrap>
              <v-flex xs10>
                <v-container>
                  <v-row align="end">{{new Date().getFullYear()}} Yimoo BETA -韩梓健</v-row>
                </v-container>
              </v-flex>
              <v-spacer />
              <base-btn class="mr-0" square title="Go to top" @click="$vuetify.goTo(0)">
                <v-icon>mdi-chevron-up</v-icon>
              </base-btn>
            </v-layout>
          </v-container>
        </v-footer>
      
    </v-content>
    <!---页脚调试区-->
    <!-- <v-footer app padless>
			{{this.$cookies.get("autodarkmode")}}
    </v-footer> -->
  </v-app>
</template>
<script>
import Topbar from "./components/Topbar.vue";
import Launchdialog from "./components/Launchdialog.vue";
import Registdialog from "./components/Registdialog.vue";
import Settings from "./components/Settings.vue";
//import Drawer from "./components/Drawer.vue"
//import Videoplayer from "./components/VideoPlayer.vue"
export default {
  data: () => ({
    date: new Date().getHours()+':'+new Date().getMinutes(),
    gotop: false,
    transitionanimation: "fade"
  }),
  methods: {
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    // fetchData(){

    //        console.log('路由发送变化doing...');
    //        //location.reload();
    //  }
  },
   watch:{
      // '$route':'fetchData'
  },
  components: {
    Topbar,
    Launchdialog,
    Registdialog,
    Settings
    //Drawer,
    //Videoplayer
  },
  computed: {
    darkmode: {
      get: function() {
        return this.$store.state.dark_mode;
      }
    }
  },
  created(){
    // this.fetchData();
  },
  beforecreated(){
if(!(this.$cookies.isKey("Starttime")&&this.$cookies.isKey("Endtime"))){
        this.$cookies.set("Starttime","19:00",Infinity);
        this.$cookies.set("Endtime","6:00",Infinity);
    }
    if(!this.$cookies.isKey("autodarkmode")){
      this.$cookies.set("autodarkmode","true",Infinity);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    if (this.$cookies.isKey("Theme")) {
      this.$store.commit("chage_primary_color", this.$cookies.get("Theme"));
    }
    if (this.$cookies.isKey("Dark")) {
      if (this.$cookies.get("Dark") == "true") {
        this.$store.commit("change_dark_mode");
        this.$vuetify.theme.dark = this.$store.state.dark_mode;
      }

    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      var Min=new Date().getMinutes();
      if(Number(Min)<10){
        Min="0"+Min;      }
      _this.date = new Date().getHours()+':'+Min; // 修改数据date
      var date2=Number(this.date.replace(/[\ |\:]/g,""));
      
      var datestart=Number(this.$cookies.get("Starttime").replace(/[\ |\:]/g,""));
      var dateend=Number(this.$cookies.get("Endtime").replace(/[\ |\:]/g,""));
      
      if(this.$cookies.get("autodarkmode")=="true"){
      if((date2>=datestart)||(date2<dateend)){
          if(this.$vuetify.theme.dark){
            
          }else{
            
            this.$store.commit("change_dark_mode");
            this.$cookies.set("Dark", this.$store.state.dark_mode, Infinity);
            this.$vuetify.theme.dark = this.$store.state.dark_mode;
          }
      }else{
          if(this.$vuetify.theme.dark){
              this.$store.commit("change_dark_mode");
            this.$cookies.set("Dark", this.$store.state.dark_mode, Infinity);
            this.$vuetify.theme.dark = this.$store.state.dark_mode;
          }else{
            
          }
      }
      }
    }, 1000)
	}
	if (this.$cookies.isKey("Lang")){
		this.$i18n.locale=this.$cookies.get("Lang");
	}
    this.$vuetify.theme.dark = this.$store.state.dark_mode;
    this.$vuetify.theme.themes.light.primary = this.$store.state.theme_primary_color;
    this.$vuetify.theme.themes.dark.primary = this.$store.state.theme_primary_color;
    
    
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
    
  }
  
  
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
#card {
  animation: loadinganimation 0.7s;
  -webkit-animation: loadinganimation 0.7s; 
  transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
}
@keyframes loadinganimation {
  0% {
    transform: scale(0, 0);
  }
  75% {
    transform: scale(1.05, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}
#mainrouter{
  position: absolute;
  top:0;
}

</style>